/* eslint no-undef:0, no-unused-expressions:0, array-callback-return:0 */
import React, {Component} from 'react';
import cx from 'classnames';
import Layout from '@icedesign/layout';
import {Nav,Icon} from '@icedesign/base';
import Menu, {SubMenu, Item as MenuItem} from '@icedesign/menu';
import {Link} from 'react-router';
import FoundationSymbol from 'foundation-symbol';
import {enquire} from 'enquire-js';
import Footer from '../../components/Footer';
import Logo from '../../components/Logo';
import {helpNavs} from '../../navs';
import './scss/light.scss';
import './scss/dark.scss';
import SysDynamicIcon from '../../components/SysDynamicIcon';

// 设置默认的皮肤配置，支持 dark 和 light 两套皮肤配置
const theme = "light";
const { Item } = Nav;
export default class CustomLayout5 extends Component {
    static displayName = 'CustomLayout5';

    static propTypes = {};

    static defaultProps = {};

    constructor(props) {
        super(props);

        const openKeys = this.getOpenKeys();
        this.state = {
            collapse: false,
            openDrawer: false,
            isScreen: undefined,
            openKeys,
        };
        this.openKeysCache = openKeys;
    }

    componentDidMount() {
        this.enquireScreenRegister();
    }

    /**
     * 注册监听屏幕的变化，可根据不同分辨率做对应的处理
     */
    enquireScreenRegister = () => {
        const isMobile = 'screen and (max-width: 720px)';
        const isTablet = 'screen and (min-width: 721px) and (max-width: 1199px)';
        const isDesktop = 'screen and (min-width: 1200px)';

        enquire.register(isMobile, this.enquireScreenHandle('isMobile'));
        enquire.register(isTablet, this.enquireScreenHandle('isTablet'));
        enquire.register(isDesktop, this.enquireScreenHandle('isDesktop'));
    };

    enquireScreenHandle = type => {
        let collapse;
        if (type === 'isMobile') {
            collapse = false;
        } else if (type === 'isTablet') {
            collapse = true;
        } else {
            collapse = this.state.collapse;
        }

        const handler = {
            match: () => {
                this.setState({
                    isScreen: type,
                    collapse,
                });
            },
            unmatch: () => {
                // handler unmatched
            },
        };

        return handler;
    };

    /**
     * 左侧菜单收缩切换
     */
    toggleCollapse = () => {
        const {collapse} = this.state;
        const openKeys = !collapse ? [] : this.openKeysCache;

        this.setState({
            collapse: !collapse,
            openKeys,
        });
    };

    /**
     * 响应式通过抽屉形式切换菜单
     */
    toggleMenu = () => {
        const {openDrawer} = this.state;
        this.setState({
            openDrawer: !openDrawer,
        });
    };

    /**
     * 当前展开的菜单项
     */
    onOpenChange = openKeys => {
        this.setState({
            openKeys,
        });
        this.openKeysCache = openKeys;
    };

    /**
     * 响应式时点击菜单进行切换
     */
    onMenuClick = () => {
        this.toggleMenu();
    };

    /**
     * 获取当前展开的菜单项
     */
    getOpenKeys = () => {
        const {routes} = this.props;
        const matched = routes[0].path;
        let openKeys = [];

        helpNavs &&
        helpNavs.length > 0 &&
        helpNavs.map((item, index) => {
            if (item.to === matched) {
                openKeys = [`${index}`];
            }
        });
        console.log(helpNavs);

        return openKeys;
    };

    scrollToAnchor = (anchorName) => {
        if (anchorName) {
            let anchorElement = document.getElementById(anchorName);
            if(anchorElement) { anchorElement.scrollIntoView(); }
        }
    }

    render() {
        const {location = {}} = this.props;
        return (
            <Layout
                fixable
                style={{minHeight: '100vh'}}
                className={cx(`ice-design-custom-layout-${theme}`, {
                    'ice-custom-layout5': true,
                    'aside-collapse': this.state.collapse,
                    // 'ice-design-header-fixed': false,
                    // 'ice-design-footer-fixed': false,
                })}
            >
                <Layout.Section
                    className={cx({
                        'ice-custom-layout5-main-section': true,
                        'ice-custom-layout5-main-section-open-drawer': this.state
                            .openDrawer,
                        'ice-custom-layout5-main-section-collapse': this.state.collapse,
                    })}
                >
                    {this.state.isScreen === 'isMobile' && (
                        <a className="menu-btn" onClick={this.toggleMenu}>
                            <Icon type="category" size="small"/>
                        </a>
                    )}
                    {this.state.openDrawer && (
                        <div className="open-drawer-bg" onClick={this.toggleMenu}/>
                    )}
                    {/*<Layout.Aside*/}
                        {/*width="auto"*/}
                        {/*theme={theme}*/}
                        {/*className={cx({*/}
                            {/*'ice-custom-layout5-aside': true,*/}
                            {/*'open-drawer': this.state.openDrawer,*/}
                        {/*})}*/}
                    {/*>*/}
                        {/*<Logo style={{marginTop: 20}}/>*/}
                        {/*<Nav*/}
                            {/*style={{ width: "240px",marginTop:25}}*/}
                            {/*direction={"ver"}*/}
                            {/*defaultSelectedKeys={["0"]}*/}
                        {/*>*/}
                            {/*{helpNavs.map((nav, index) => {*/}
                                {/*if (nav.isChild) {*/}
                                    {/*return(*/}
                                        {/*<Item key={index}>*/}
                                            {/*<a onClick={()=>this.scrollToAnchor(nav.to)}>*/}
                                                {/*<SysDynamicIcon style={{marginLeft:20}} type={nav.icon} size={"small"} /> {nav.text}*/}
                                            {/*</a>*/}
                                        {/*</Item>*/}
                                    {/*)*/}
                                {/*}else {*/}
                                    {/*return (*/}
                                        {/*<Item key={index}>*/}
                                            {/*<a onClick={() => this.scrollToAnchor(nav.to)}>*/}
                                                {/*<SysDynamicIcon type={nav.icon} size={"small"}/> {nav.text}*/}
                                            {/*</a>*/}
                                        {/*</Item>*/}
                                    {/*)*/}
                                {/*}*/}
                            {/*})}*/}
                        {/*</Nav>*/}
                    {/*</Layout.Aside>*/}
                    {/* 主体内容 */}
                    <Layout.Main scrollable>{this.props.children}</Layout.Main>
                </Layout.Section>
                <Footer
                    className={cx({
                        'ice-custom-layout5-footer': true,
                    })}
                />
            </Layout>
        );
    }
}
